<template>
  <div class="userDetails w">
    <el-row
      v-if="Object.keys(this.userDetail).length === 0"
      type="flex"
      justify="center"
    >
      <img
        src="../../../../assets/images/loading.3708220b.gif"
        alt=""
        height="200"
        width="200"
      />
    </el-row>
    <div class="content" v-else>
      <el-row type="flex">
        <el-col :span="6" class="avatar">
          <GlobalImageDeep
            :url="userDetail.profile.avatarUrl"
            :imgWidth="188"
            :imgHeight="188"
          />
        </el-col>
        <el-col class="info">
          <h2>
            {{ userDetail.profile.nickname }}
            <span>Lv.&nbsp;{{ userDetail.level }}</span>
            <i
              v-if="userDetail.profile.gender === 1"
              class="iconfont icon-nan"
            ></i>
            <i
              v-if="userDetail.profile.gender === 2"
              class="iconfont icon-nv"
            ></i>
          </h2>
          <!-- 数据列表  动态、关注、粉丝等 -->
          <div class="info_data">
            <div class="info_data_item">
              <p>{{ getCount(userDetail.profile.eventCount) }}</p>
              <span>动态</span>
            </div>
            <div class="info_data_item">
              <p>{{ getCount(userDetail.profile.follows) }}</p>
              <span>关注</span>
            </div>
            <div class="info_data_item">
              <p>{{ getCount(userDetail.profile.followeds) }}</p>
              <span>粉丝</span>
            </div>
          </div>
          <!-- 用户的信息啥的 -->
          <div class="info_signature">
            注册时间 : {{ fomatCreateTime(userDetail.profile.createTime) }}
          </div>
          <div class="info_signature">
            个人介绍 : {{ userDetail.profile.signature }}
          </div>
          <div class="info_signature">
            累计听歌 : {{ userDetail.listenSongs }} 次
          </div>
        </el-col>
      </el-row>
      <el-tabs v-model="activeName" class="tabs">
        <el-tab-pane label="创建的歌单" name="first">
          <userCreatAlbumCpm
            v-if="Object.keys(userDetail).length != 0"
            :uid="uid"
          />
        </el-tab-pane>
        <el-tab-pane label="喜欢的音乐" name="second">
          <likeSongsListCpm
            v-if="activeName == 'second' && Object.keys(userDetail).length != 0"
            :uid="uid"
          />
        </el-tab-pane>
        <el-tab-pane label="动态" name="third">
          <eventCountCpm
            v-if="activeName == 'third'"
            :uid="uid"
            :total="userDetail.profile.eventCount"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getUserDetail, getUserAlbum } from "../../../../api/userDetailsApi";
import { getCount } from "../../../../utils/format";
import moment from "moment";
import userCreatAlbumCpm from "./components/userCreatAlbumCpm.vue";
import likeSongsListCpm from "./components/likeSongsListCpm.vue";
import eventCountCpm from "../../../mymusic/components/eventCount/index.vue";
export default {
  name: "userDetails",
  components: { userCreatAlbumCpm, likeSongsListCpm, eventCountCpm },
  data() {
    return {
      uid: "",
      userDetail: {},
      activeName: "first",
      // userCreateAlbum: [], // 用户创建的歌单
      // userSubscribedAlbum: [], // 用户 订阅的歌单
    };
  },
  created() {
    this.uid = this.$route.params.uid;
    this.getUserDetailMethod();
  },
  methods: {
    // 获取用户信息
    async getUserDetailMethod() {
      let result = await getUserDetail(this.uid);
      if (result.code === 200) {
        this.userDetail = result;
      }
    },
    // 获取用户的歌单
    async getUserAlbumMethod() {},
    getCount,
    fomatCreateTime(time) {
      return moment(time).format("YYYY-MM-DD");
    },
  },
  computed: {},
};
</script>

<style lang="less" scoped>
.userDetails {
  color: #000000;
  font-size: 14px;
  padding: 30px 0;
  .content {
    .avatar {
      /deep/ .el-image img {
        border-radius: 10px;
      }
    }
    .info {
      > h2 {
        font-size: 22px;
        font-weight: normal;
        padding-bottom: 10px;
        border-bottom: 1px solid #999999;
        margin-bottom: 15px;
        span {
          margin-left: 6px;
          padding: 1px 10px;
          font-size: 14px;
          font-style: italic;
          border: 1px solid @globalColor;
          border-radius: 15px;
          color: @globalColor;
        }
        .icon-nv,
        .icon-nan {
          color: #fdb5d3;
          font-size: 20px;
          margin-left: 10px;
        }
        .icon-nan {
          color: #3fa4e3;
        }
      }
      .info_data {
        display: flex;
        margin-bottom: 15px;
        .info_data_item {
          display: flex;
          flex-direction: column;
          padding-right: 20px;
          margin-right: 20px;
          border-right: 1px solid @globalColor;
          &:nth-child(3) {
            border-right: none;
          }
          p {
            font-size: 22px;
            color: #666666;
            cursor: pointer;
            &:hover {
              color: @globalColor;
            }
          }
          span {
            font-size: 12px;
          }
        }
      }
      .info_signature {
        color: #999999;
      }
    }
    // 样式覆盖

    /deep/ .el-tabs__item.is-active {
      color: @globalColor;
    }
    /deep/ .el-tabs .el-tabs__active-bar {
      background-color: @globalColor;
    }
    /deep/ .el-tabs .el-tabs__item {
      &:hover {
        color: @globalColor;
      }
    }
    /deep/ .el-tabs {
      padding-bottom: 20px;
    }
    .tabs {
      padding-top: 30px;
    }
  }
}
</style>
